<template>
  <div class="container">
    <el-card class="categories-card">
      <!-- 栅格布局 -->
      <el-row>
        <el-col :span="12">
          <el-button type="primary" size="small" @click="addPage">添加页面</el-button>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="请输入关键字" v-model="input" @input="handlerChange">
            <el-button slot="append" @click="search">筛选</el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <!-- 序号 -->
        <el-table-column label="序号" width="70px">
          <template v-slot="{ $index }">
            {{ pageSize * (currentPage - 1) + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="content" label="内容">
          <template slot-scope="{row}">
            <div style="max-height: 180px; overflow: auto">
              <p v-html="row.content"></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="handle" label="操作">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" @click="editPage(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delPage(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page.sync="currentPage"
          @current-change="currentChange" v-if="bPageShow">
        </el-pagination>
      </el-row>
      <!-- 弹窗 -->
      <!-- <el-dialog :title="form.id ? '编辑页面' : '添加页面'" :visible.sync="dialogFormVisible" @close="closeFn"> -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="closeFn">
        <el-form :model="form" ref="form" :rules="rules">
          <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
            <!-- 富文本 -->
            <quill-editor v-model="form.content" ref="myQuillEditor"
              @blur="changeQuillEditor"></quill-editor>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="closeFn">取 消</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { getPagesList, getPagesCount, getPage,delPage,editPage,addPage } from '@/api/pages'
export default {
  data() {
    return {
      title:'',
      input: '',
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '60px',
      form: {
        title: '',
        content: ''
      },
      total: 0,
      pageSize: 2,
      currentPage: 1, // 当前页
      bPageShow: true,//分页重新加载可以解决搜索后当前也不变的bug,此页面使用currentPage计算分页，未用到此属性
      rules: {
        title: [
          { required: true, trigger: 'blur', message: '请输入标题' }
        ],
        content: [
          {
            required: true, trigger: 'blur', message: '请输入内容'
          },
        ]
      }
    }
  },
  methods: {
    // 新增按钮
    addPage(){
      this.title='新增页面'
      this.dialogFormVisible = true
    }, 
    // 提交处理
    async submit() {
      // 校验
      this.$refs.form.validate(async bool => {
        if (bool) {
          if (this.form.id) {
            // 编辑
            await editPage(this.form)
          } else {
            // 新增
            await addPage(this.form)
          }
          this.closeFn()
          this.getData()
        }
      })
    },
    // 删除页面
    async delPage(id){
      await delPage(id)
      // 更新列表，当删除最后一条数据的时候，需要请求上一页的数据
      if (this.tableData.length === 1 && this.currentPage !== 1) {
          this.currentPage--
        }
      this.getData()
    },
    // 搜索
    async search() {
      this.currentPage =1 // 手动修改当前页
      this.getData()
    },
    // 输入为空时自动获取列表数据
    handlerChange(e) {
      if (e === '') {
        this.getData()
      }
    },
    // 富文本编辑改变事件
    changeQuillEditor() {
      this.$refs['form'].validateField('content');
    },
    // 编辑按钮
    async editPage(id) {
      this.title='编辑页面'
      this.dialogFormVisible = true
      const res = await getPage(id)
      this.form = res.data

    },
    // 页签变化处理函数
    currentChange() {
      this.getData()
    },
    // 获取列表数据
    async getLists(num, index) {
      let res
      if(this.input!==''){
        res = await getPagesList(num, index,this.input)
      }else{
        res = await getPagesList(num,index)
      }
      this.tableData = res.data
    },
    // 获取页面数量
    async getCount() {
      let res
      if(this.input!==''){
        res = await getPagesCount(this.input)
      }else{
        res = await getPagesCount()
      }
      this.total = res.data
    },
    // 获取数据(列表、数量)
    async getData() {
      // 每页请求数量
      const num = 2
      // 序号下标
      let index = (this.currentPage - 1) * this.pageSize
      this.getLists(num, index)
      this.getCount()
    },
    // 关闭弹窗
    closeFn() {
      this.dialogFormVisible = false
      this.form = {
        title: '',
        content: ''
      }
      // 重置校验结果
      this.$refs.form.resetFields()
    }
  },
  async created() {
    // 初始化页面--渲染
    this.getData()
  }
}
</script>

<style lang="scss">
.categories-card {
  margin: 20px;
}

/* 富文本内容高度 */
// 无scoped属性的style标签里才会有效。
.ql-editor {
  min-height: 200px;
  // 不知道为什么固定高度height:200px 无效
}
</style>

